<template>
  <div>
    <el-row>
      <el-col :span="4">
        <el-input v-model="gaocha.zidingyi" />
      </el-col>
      <el-select v-model="gaocha.select">
        <el-option  label="案号" value="1" created></el-option>
        <el-option  label="发票抬头" value="2"></el-option>
      </el-select>
      <el-select v-model="gaocha.cwInvoiceStatus" placeholder="请选择开票状态">
        <el-option  label="请选择开票状态" value=""></el-option>
        <el-option  label="已开票" value="Y"></el-option>
        <el-option  label="未开票" value="N"></el-option>
      </el-select>
      <el-select v-model="gaocha.cwInvoiceType" placeholder="请选择发票类型">
        <el-option  label="请选择发票类型" value=""></el-option>
        <el-option  label="增值税专用发票" value="1"></el-option>
        <el-option  label="增值税普通发票" value="2"></el-option>
        <el-option  label="通用机打发票" value="3"></el-option>
      </el-select>
      <el-select v-model="gaocha.cwInvoiceItem" placeholder="请选择开票项目">
        <el-option  label="请选择开票项目" value=""></el-option>
        <el-option v-for="(item,index) in fapiaoxiangmu" :key="index" :label="item.typeName" :value="item.id"></el-option>
      </el-select>
    </el-row>
    <el-row>
      <el-col :span="2"><br>开票日期:</el-col>
      <el-col :span="4">
        <el-date-picker type="date" v-model="gaocha.sta" placeholder="选择开始时间"
                        value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>


      </el-col>
      <el-col class="line" :span="1">-</el-col>
      <el-col :span="4">
        <el-date-picker type="date" v-model="gaocha.ends" placeholder="选择结束时间"
                        value-format="yyyy-MM-dd"  style="width: 100%;"></el-date-picker>
      </el-col>
      <el-col :span="5">
        <el-button type="primary" plain @click="gaojijiansuo">检索</el-button>

      </el-col>
    </el-row>


    <!--  渲染数据库里 cw_invoice 表的字段数据-->
    <template>
      <el-table :data="tableData"  :summary-method="getSummaries" show-summary>
        <el-table-column
            prop="caseNo"
            label="案号"
            align="center"
        >
        </el-table-column>

        <el-table-column
            prop="caseAttorney"
            label="办案律师"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="cwInvoiceTitle"
            label="发票抬头"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="caseAgencyfee"
            label="代理费"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="cwInvoiceMoney"
            label="发票金额"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="caseInvoiced"
            label="已开发票金额"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="casePaidsal"
            label="已付款"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="cwInvoiceDate"
            label="开票日期"
            align="center"
        >
        </el-table-column>
        <el-table-column
            prop="cwInvoiceStatus"
            label="开票状态"
            align="center"
        >
          <template  slot-scope="scope" >
{{ (scope.row.cwInvoiceStatus=="Y"?'已开票':'未开票')}}
          </template>
        </el-table-column>
      </el-table>













    </template>
    <!--分页-->
    <!-- 分页组件 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="gaocha.currentPage"
        :page-sizes="[2,5, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--分页结束-->

  </div>
</template>

<script>
export default {
  name: "CwInvoiceFAPIAO.vue",
  data(){
    return {
      total :0,       //
      gaocha:{
        //登录者的  员工id
        hrEmpId: JSON.parse(localStorage["user"])[0].hrEmpId,
        currentPage:1, //初始页
        pageSize:2,    //    每页的数据
        zidingyi:"",
        select :"1",
        cwInvoiceStatus:"",//开票状态
        cwInvoiceType:"",//发票类型
        cwInvoiceItem:"",//开票项目
        sta:"" ,//开始时间
        ends:"",//结束时间
      },
      //cw_fapiao_type 表的数据
      fapiaoxiangmu: [],
      tableData:[]
    }
  }
  , methods:{

    //分页
    // 每页显示的几条数据
    handleSizeChange: function (size) {
      this.gaocha.pageSize = size;
      //   console.log(this.gaocha.pageSize)
      this.getlist()
    },
    //当前页
    handleCurrentChange: function(currentPage){
      this.gaocha.currentPage = currentPage;
      // console.log(this.gaocha.currentPage)
      this.GetLogJob()
    },   //合计
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          if(  sums[index]==0){return   sums[index]=""; }

          sums[index] += ' 元';
        } else {
          return;
        }

      });
      return sums;
    },

    //渲染cw_fapiao_type表的数据  开票项目
    cwfapiao() {
      this.$http.get('/cwFapiaoType')
          .then(res => {
            //数据放入fapiaoxiangmu 数组里面
            this.fapiaoxiangmu = res.data.data
          })
    },
    //高级查询
    gaojijiansuo(){
      this.getlist();
    },
    //查询
    getlist(){
      this.$http.get("/Kj",{params:this.gaocha}).then(res=>{
        //所有的数据
        this.tableData=res.data.data.list
        //数据总条数
        this.total=  res.data.data.total
      })
    }
  },
  created() {
    this.cwfapiao();
    this.getlist();
  }
}
</script>

<style scoped>

</style>